<template>
    <div>
        <!-- 标题导航 -->
        <van-nav-bar
            title="个人信息"
            right-text="保存"
            left-arrow
            style="height: 50px;"
            @click-left="onClickLeft"
            @click-right="onClickRight"
            />
        <div>
            <!-- 头像 -->
            <van-cell  is-link style="height: 60px;">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title class="head">
                    <span class="custom-title" >头像</span>
                    <van-uploader :after-read="afterRead" style="position: absolute; left: 75%; top:1px;"
                    preview-size="50px" v-model="fileList" multiple :max-count="1" />
                </template>
            </van-cell>
            <!-- 名称 -->
            <van-cell title="昵称" is-link value="img_88888" />
            <!-- 性别 -->
            <van-cell is-link title="性别" @click="show2 = true" :value="sex"/>
            <van-action-sheet v-model="show2" :actions="actions" @select="onSelect"/>

            <!-- 生日 -->
            <van-cell title="选择单个日期" :value="date" @click="show = true" />
            <van-calendar v-model="show" @confirm="onConfirm" :min-date="minDate" :max-date="maxDate" />

            <!-- 手机号 -->
            <van-cell-group style="position: relative;">
                <van-cell  title="手机号" value="136****5289" />
                <van-icon name="question-o" style="position: absolute; bottom:14px; left: 60px; z-index: 100;" />

            </van-cell-group>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
    export default {
        data() {
            return {
                date: '',
                show: false,
                show2:false,
                actions:[{name:'男'},{name:'女'}],
                sex: '',
                minDate: new Date(1970, 0, 1),
                maxDate: new Date(2023, 12, 12),
                // 头像上传
                fileList:[]
                

            }
        },
        methods: {
            onClickLeft() {
            this.$router.push('/home/me')
            },
            onClickRight() {
            Toast('保存成功');
            },

            // 性别
            onSelect(item) {
            // 默认情况下点击选项时不会自动收起
            // 可以通过 close-on-click-action 属性开启自动收起
            this.show2 = false;
            Toast(item.name);
            console.log(item.name)
            this.sex = item.name
          },

            //   生日
            formatDate(date) {
                return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
                },
            onConfirm(date) {
                this.show = false;
                this.date = this.formatDate(date);
                },
                afterRead(file) {
                    // 此时可以自行将文件上传至服务器
                    console.log(file);
                    },
        },
}
</script>

<style lang="scss" scoped>
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
    align-items: center;
  }
  .head{
    position: relative;
  }
</style>